// 入口函数
$(function () {
    // 欲求1: 点击切换
    $('.login-box a').on('click', () => {
        // 点击登录区域里的a, 隐藏登录区域, 显示注册区域
        $('.reg-box').show()
        $('.login-box').hide()
    })

    $('.reg-box a').on('click', () => {
        // 点击注册区域里的a, 隐藏注册区域, 显示登录区域
        $('.login-box').show()
        $('.reg-box').hide()
    })


    // 需求2: 自定义校验规则
    let form = layui.form
    // verify()方法, 值是对象类型, 属性是校验规则名称, 值是具体的校验规则(数组或者函数)
    form.verify({
        username: [
            // 数组有两个值, 第一个是校验规则, 第二个是报错信息
            // \w   a-z/A-Z/0-9
            // \S   非空白字符
            /^\w{1,10}$/,
            '用户名必须是1-10位的字母和数字 '
        ],
        password: [

            /^[\S]{6,15}$/,
            '密码长度必须是6-15位的非空字符串'
        ],
        // 自定义重复密码规则
        repwd: function (value) {
            // value 代表 repassword 的值
            // 获取 password 的值
            let pwd = $('.reg-box input[name=password]').val()
            // 判断: 如果两个值不相同, 返回报错信息
            if (value !== pwd) {
                return '两次密码输入不一致!'
            }
        }
    })


    // 需求3: 注册功能
    let layer = layui.layer
    $('#formReg').on('submit', function (e) {
        // console.log($(this).serialize());  //  username=goudan9426&password=94263232&repassword=94263232
        e.preventDefault()  // 组织表单默认提交
        // 发送ajax
        axios({
            method: 'POST',
            url: '/api/reguser',
            data: $('#formReg').serialize()
        }).then(res => {
            // console.log(res.data !== 0);
            // console.log(res.data);
            if (res.data.status !== 0) {
                // return alert(res.data.message)
                return layer.msg(res.data.message)
            }

            // alert('恭喜您, 注册成功!')  //成功提示 
            layer.msg('恭喜您, 注册成功!')  //成功提示 
            // 切换到登录区, 清空注册表单
            $('.reg-box a').click()  // 切换
            $('#formReg')[0].reset()  // 清空
        })

    })


    // 需求4: 登录功能
    $('#formLogin').on('submit', function (e) {
        e.preventDefault()
        axios({
            method: 'POST',
            url: '/api/login',
            data: $('#formLogin').serialize()
        }).then(res => {
            if (res.data.status !== 0) {
                $('#formLogin').reset()
                return layer.msg(res.data.message)
            }

            layer.msg('恭喜您, 登录成功!')

            localStorage.setItem('token', res.data.token)  // 将获取到token值保存到本地
            location.href = '/index.html'  // 切换路由, 跳转页面到首页
        })
    })



})